<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Datadictionary, DatadictionaryShow } from "@/http/api";

export default {
  components: { outMain },
  name: "",
  data() {
    return {
      stepArr: [
        { name: "船舶类型", id: 1 },
        { name: "船舶航区", id: 2 },
        { name: "岗位职务", id: 3 },
        { name: "船员标签", id: 5 },
        { name: "船员状态", id: 6 },
        { name: "国籍分类", id: 8 },
        { name: "沟通标签", id: 9 },
        { name: "培训类型", id: 10 },
        { name: "岗位福利", id: 11 },
      ],
      // showBtn: true,
      tags: [],
      stepId: 1,
      addTagValue: "",
    };
  },
  props: {},
  setup() {},
  methods: {
    navFn(item) {
      this.stepId = item.id;
      this.getData();
    },
    delTag(index) {
      this.tags.splice(index, 1);
      this.saveFn();
    },
    addTagFn() {
      if (!this.addTagValue) {
        return false;
      }
      this.tags.push({ name: this.addTagValue });
      this.addTagValue = "";
      // this.showBtn = true;
      this.saveFn();
    },
    focusFn() {
      this.showBtn = false;
    },
    saveFn() {
      let data = {
        type: this.stepId,
        value: this.tags,
      };
      Datadictionary(data).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "保存成功",
          });
        }
      });
    },
    getData() {
      DatadictionaryShow({ type: this.stepId }).then((res) => {
        if (res.data.code == 1) {
          this.tags = res.data.data;
          this.showCont = true;
        }
      });
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>数据字典</div>
        </div>
        <div class="formMain">
          <div class="stepNav">
            <div
              :class="stepId === item.id ? 'stepItemActive' : 'stepItem'"
              @click="navFn(item)"
              :key="index"
              v-for="(item, index) in stepArr"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="stepCont">
            <div class="formDes flexPull">
              <div class="tagsCont">
                <div
                  class="tagsItem"
                  :key="index"
                  v-for="(item, index) in tags"
                >
                  <div>{{ item.name }}</div>
                  <div class="iconfont icon-cuowu" @click="delTag(index)"></div>
                </div>
                <div class="addTag">
                  <el-input
                    placeholder="新增标签"
                    style="width: 120px; margin-right: 10px"
                    @blur="addTagFn"
                    v-model="addTagValue"
                  />
                </div>
                <div class="saveBtn" v-if="false">
                  <btn value="保存设置" @click="saveFn"></btn>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
